<template>
	<!-- 上面的等待支付 -->
	<!-- <wait-payment></wait-payment> -->
	<!-- 签约完成 等待支付 -->
	<view class="payment-bg" v-if="signDetailData.state===2">
		<view class="center-payment">
			<view class="image-item">
				<image src="/static/icons/u4963.png" mode=""></image>
			</view>
			<view class="wait-item">
				等待支付
			</view>
			<view class="quick-item">
				您的签约审核已通过，请尽快完成支付
			</view>
		</view>
	</view>
	<!-- 医生审核中 -->
	<view class="payment-bg" v-if="signDetailData.state===1">
		<view class="center-payment">
			<view class="image-item">
				<image src="/static/icons/u4963.png" mode=""></image>
			</view>
			<view class="wait-item">
				医生审核中
			</view>
			<view class="quick-item">
				您的申请已提交，医生审核通过后支付即可完成签约
			</view>
		</view>
	</view>
	<!-- 签约驳回 -->
	<view class="payment-bg" v-if="signDetailData.state===0">
		<view class="center-payment">
			<view class="image-item">
				<image src="/static/icons/u5207.png" mode=""></image>
			</view>
			<view class="wait-item">
				签约失败
			</view>
			<view class="quick-item">
				签约申请被驳回
			</view>
		</view>
	</view>
	<!-- 已签约 -->
	<view class="payment-bg" v-if="signDetailData.state===3">
		<view class="center-payment">
			<view class="image-item">
				<image src="/static/icons/u4418.png" mode=""></image>
			</view>
			<view class="wait-item">
				已签约
			</view>
		</view>
	</view>

	<!-- 下面的个人信息 -->
	<sign-user-detail v-if="signDetailData.state!==3"></sign-user-detail>
	<!-- 签约成功的详情 -->
	<contract-signed v-if="signDetailData.state==3" :signId="signId"></contract-signed>

	<view class="footer" v-if="signDetailData.state==2">
		<view class="quicky-payment" @click="toPayment">立即支付</view>
	</view>
	<!-- 申请续约 -->
	<view class="footer" v-if="signDetailData.state==3">
		<view class="quicky-payment" @click="toApply">申请续约</view>
	</view>

</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getSignDetailsApi,
		getSignPaymentApi
	} from '../../../api/sign';
	import {
		useUserStore
	} from '../../../store/user';
	import {
		ref
	} from 'vue';
	const useStore = useUserStore()
	// 接收传过来的签约的进度的id
	const signId = ref('')
	// 签约详情的数据
	const signDetailData = ref({})
	onLoad((options) => {
		console.log(options, '哈哈哈哈哈哈'); //传过来的信息
		signId.value = options._id
		// console.log('签约的id', signId.value); //拿到签约的id 去获取签约详情 根据签约详情去渲染上面的信息

		getSignDetailData()
	})
	// 根据签约id 去获取签约详情的信息
	const getSignDetailData = () => {
		getSignDetailsApi({
				_id: signId.value
			})
			.then(res => {
				if (res.code == 200) {
					console.log(res.data, '嘻嘻嘻');
					signDetailData.value = res.data
				}
			})
	}
	// 点击立即支付发送请求 根据签约的id去发请求
	const getPayment = (options) => {
		getSignPaymentApi({
				_id: options._id
			})
			.then(res => {
				if (res.code == 200) {
					console.log('支付成功');
					uni.showToast({
						title: '支付成功',
						duration: 1000,
					});
				}
			})
	}
	const toPayment = () => {
		// 跳转到支付的页面 再把签约id 传过去
		uni.navigateTo({
			url: `/minePackage/pages/payment/payment?_id=${signId.value}`
		})
	}
	const toHome = () => {
		uni.switchTab({
			url: '/pages/home/home'
		})
	}
	const toSignDetail = () => {
		uni.navigateTo({
			url: '/minePackage/pages/sign-detail/sign-detail'
		})
	}
	// 打开支付
	// 申请续约 根据签约的id 去续约 
	const toApply = () => {
		uni.navigateTo({
			url: `/minePackage/pages/apply-sign/apply-sign?_id=${signId.value}&name=zhangsan`
		})
	}
</script>

<style scoped lang="scss">
	.scroll-Y {
		height: 1300rpx;
	}

	.payment-bg {
		width: 750rpx;
		height: 324rpx;
		background-color: #ffffff;
		overflow: hidden;
	}

	.wait-item {
		font-size: 40rpx;
		color: #333333;
		text-align: center;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}

	.quick-item {
		font-size: 26rpx;
		color: #999999;
		text-align: center;
		margin-bottom: 30rpx;
	}

	.image-item {
		text-align: center;
		margin-top: 30rpx;
		// margin-bottom: 30rpx;

		image {
			width: 80rpx;
			height: 80rpx;
		}
	}

	.money-item {
		font-size: 56rpx;
		color: #333333;
		font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC';
		font-weight: 650;
		text-align: center;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}

	.tips-item {
		font-size: 28rpx;
		color: #999999;
		text-align: center;
		margin-bottom: 30rpx;
	}

	.pay-list {
		width: 750rpx;
		height: 192rpx;
		background-color: #ffffff;
		padding: 0 32rpx;
	}

	.flex-alipay {
		display: flex;
		justify-content: space-between;
		align-items: center;
		// margin-bottom: 30rpx;
		padding-top: 20rpx;
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #e9e9e9;
	}

	.flex-label {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 30rpx;
		padding-bottom: 20rpx;
	}

	.radio-item {
		margin-right: 60rpx;
	}

	.alipay-payment {
		width: 750rpx;
		height: 96rpx;
		background-color: #ffffff;
		padding: 0 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.alipay-top {
		display: flex;
	}

	.wechat-top {
		display: flex;
	}

	.alipay-image {
		margin-right: 20rpx;

		image {
			width: 36rpx;
			height: 36rpx;
		}
	}

	.wechat-pay {
		width: 100%;
		height: 96rpx;
		background-color: #ffffff;
		padding: 0 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.wechat-image {
		margin-right: 20rpx;

		image {
			width: 36rpx;
			height: 36rpx;
		}
	}

	.wechat-item {
		margin-right: 60rpx;
	}

	.btn-quk {
		width: 690rpx;
		height: 88rpx;
		padding: 0 32rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		// border: 1rpx solid;
	}

	.quick-pay {
		width: 720rpx;
		height: 88rpx;
		background-color: #2984f8;
		border-radius: 20rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 32rpx;
		color: #ffffff;
		margin-top: 80rpx;
	}

	.result-image {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 30rpx 0;

		image {
			width: 80rpx;
			height: 80rpx;
		}
	}

	.pay-success {
		font-size: 40rpx;
		color: #333333;
		text-align: center;
		margin-bottom: 30rpx;
		font-family: 'PingFangSC-Regular', 'PingFang SC';
		font-weight: 400;
	}

	.ready-doctor {
		font-size: 26rpx;
		color: #999999;
		text-align: center;
		margin-bottom: 80rpx;
	}

	.look-detail {
		margin: 0 32rpx;
		width: 670rpx;
		height: 88rpx;
		border-radius: 20rpx;
		background-color: #2984F8;
		font-family: 'PingFangSC-Regular', 'PingFang SC';
		font-weight: 400;
		font-size: 32rpx;
		color: #ffffff;
		text-align: center;
		line-height: 88rpx;
		margin-bottom: 30rpx;
	}

	.back-home {
		margin: 0 32rpx;
		width: 670rpx;
		height: 88rpx;
		border-radius: 20rpx;
		font-family: 'PingFangSC-Regular', 'PingFang SC';
		font-weight: 400;
		font-size: 32rpx;
		color: #2984F8;
		background-color: #ffffff;
		border: 1rpx solid #e5e5e5;
		text-align: center;
		line-height: 88rpx;
	}

	.footer {
		width: 100%;
		height: 160rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.quicky-payment {
		width: 670rpx;
		height: 88rpx;
		background-color: #2984f8;
		border-radius: 20rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 32rpx;
		color: #ffffff;
	}
</style>
<style>
	page {
		background-color: #f7fafd;
		/* 自定义颜色 */
	}
</style>